import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as TooltipStories from './Tooltip.stories';

<Meta of={TooltipStories} />

# Tooltip

The Tooltip component is a UI element that displays informative text when users hover over, focus on, or tap an element. Tooltips are useful for providing additional context, explanations, or guidance without cluttering the interface.

## Usage

<Canvas of={TooltipStories.Documentation} source={ { code: `
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const TooltipExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<p>Tooltip trigger</p>}
                content={
                    <>
                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
                        viverra sit amet massa sagittis sollicitudin.
                    </>
                }
                align="center"
                side="top"
                variant="accent"
                showArrow={true}
            />
        </Tooltip.Provider>
    );
};

export default TooltipExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tooltip/Tooltip.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={TooltipStories.Documentation} />

```tsx
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const TooltipExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<p>Tooltip trigger</p>}
                content={
                    <>
                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
                        viverra sit amet massa sagittis sollicitudin.
                    </>
                }
                align="center"
                side="top"
                variant="accent"
                showArrow={true}
            />
        </Tooltip.Provider>
    );
};

export default TooltipExample;
```

## Examples

### Basic Tooltip

A basic tooltip with default styling.

<Canvas of={TooltipStories.Default} source={ { code: `
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const BasicTooltipExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<p>Tooltip trigger</p>}
                content={
                    <>
                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
                        viverra sit amet massa sagittis sollicitudin.
                    </>
                }
            />
        </Tooltip.Provider>
    );
};

export default BasicTooltipExample;
` } } />

### Accent Variant

A tooltip with the accent color variant for higher contrast.

<Canvas of={TooltipStories.AccentVariant} source={ { code: `
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const AccentVariantExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<p>Tooltip trigger</p>}
                content={
                    <>
                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
                        viverra sit amet massa sagittis sollicitudin.
                    </>
                }
                variant="accent"
            />
        </Tooltip.Provider>
    );
};

export default AccentVariantExample;
` } } />

### Subtle Variant

A tooltip with the subtle variant, which is useful on dark backgrounds.

<Canvas of={TooltipStories.SubtleVariant} source={ { code: `
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const SubtleVariantExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<p>Tooltip trigger</p>}
                content={
                    <>
                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
                        viverra sit amet massa sagittis sollicitudin.
                    </>
                }
                variant="subtle"
            />
        </Tooltip.Provider>
    );
};

export default SubtleVariantExample;
` } } />

### Without Arrow

A tooltip without the pointing arrow.

<Canvas of={TooltipStories.WithoutArrow} source={ { code: `
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const WithoutArrowExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<p>Tooltip trigger</p>}
                content={
                    <>
                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
                        viverra sit amet massa sagittis sollicitudin.
                    </>
                }
                showArrow={false}
            />
        </Tooltip.Provider>
    );
};

export default WithoutArrowExample;
` } } />

### With Icon Trigger

Tooltips are commonly used with icon buttons to provide context about the icon's function.

<Canvas of={TooltipStories.WithIconTrigger} source={ { code: `
import React from "react";
import { Tooltip, Icon } from "@webiny/admin-ui";
import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";

const WithIconTriggerExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<Icon icon={<InfoIcon />} label="Information" />}
                content="This is a helpful tooltip"
            />
        </Tooltip.Provider>
    );
};

export default WithIconTriggerExample;
` } } />

### Positioning

Tooltips can be positioned in different ways relative to the trigger element.

<Canvas of={TooltipStories.Positioning} source={ { code: `
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const PositioningExample = () => {
    return (
        <Tooltip.Provider>
            <div className="flex justify-center items-center h-48">
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;Top&nbsp;&nbsp;</p>}
                    content={<div>Tooltip on top</div>}
                    side="top"
                />
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;Right&nbsp;&nbsp;</p>}
                    content={<div>Tooltip on right</div>}
                    side="right"
                />
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;Bottom&nbsp;&nbsp;</p>}
                    content={<div>Tooltip on bottom</div>}
                    side="bottom"
                />
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;Left&nbsp;&nbsp;</p>}
                    content={<div>Tooltip on left</div>}
                    side="left"
                />
            </div>
        </Tooltip.Provider>
    );
};

export default PositioningExample;
` } } />

### Alignment

Tooltips can be aligned differently relative to the trigger element.

<Canvas of={TooltipStories.Alignment} source={ { code: `
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const AlignmentExample = () => {
    return (
        <Tooltip.Provider>
            <div className="flex justify-center items-center h-48">
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;Start&nbsp;&nbsp;</p>}
                    content={<div>Aligned to start</div>}
                    align="start"
                />
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;Center&nbsp;&nbsp;</p>}
                    content={<div>Aligned to center</div>}
                    align="center"
                />
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;End&nbsp;&nbsp;</p>}
                    content={<div>Aligned to end</div>}
                    align="end"
                />
            </div>
        </Tooltip.Provider>
    );
};

export default AlignmentExample;
` } } />

### With Button Trigger

Tooltips can be used with buttons to provide additional information about the button's action.

<Canvas of={TooltipStories.WithButtonTrigger} source={ { code: `
import React from "react";
import { Tooltip, Button } from "@webiny/admin-ui";

const WithButtonTriggerExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<Button text="Hover me" />}
                content="This tooltip is triggered by a button"
            />
        </Tooltip.Provider>
    );
};

export default WithButtonTriggerExample;
` } } />

### With Formatted Content

Tooltips can contain rich, formatted content with multiple elements.

<Canvas of={TooltipStories.WithFormattedContent} source={ { code: `
import React from "react";
import { Tooltip, Text } from "@webiny/admin-ui";

const WithFormattedContentExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<p>Hover for more info</p>}
                content={
                    <div className="flex flex-col gap-xs">
                        <Text size="sm" className="font-bold">Important Information</Text>
                        <Text size="sm">This tooltip contains formatted content with multiple paragraphs.</Text>
                        <Text size="sm">You can include various elements inside tooltips.</Text>
                    </div>
                }
            />
        </Tooltip.Provider>
    );
};

export default WithFormattedContentExample;
` } } />

### With Help Icon

A common pattern is to use tooltips with help icons to provide contextual help.

<Canvas of={TooltipStories.WithHelpIcon} source={ { code: `
import React from "react";
import { Tooltip, Icon } from "@webiny/admin-ui";
import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";

const WithHelpIconExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<Icon icon={<HelpIcon />} label="Help" />}
                content="Need help? Contact support at support@example.com"
            />
        </Tooltip.Provider>
    );
};

export default WithHelpIconExample;
` } } />
